<template>
	<van-row>
		<!-- 左侧分类类别 -->
		<van-col span="7" class="left">
			<van-sticky :offset-top="46">
				<van-sidebar v-model="active" @change="onChange">
					<van-sidebar-item v-for="(item,i) in categoryList" :key="i" :title="item.name" />
				</van-sidebar>
			</van-sticky>
		</van-col>
		<!-- 右侧对应的商品列表 -->
		<van-col span="17" class="right">

			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
					<div v-for="(item,i) in productList" :key="i">
						<router-link :to="{path:'/productDetail/' + item.id}">
							<van-card :price="item.price" :desc="item.spec" :title="item.title"
								:thumb="`${APIDomainName + item.pic}`" />
						</router-link>
					</div>
				</van-list>
			</van-pull-refresh>

		</van-col>
	</van-row>
</template>

<script>
	import { getCategoryListAPI } from "@/api/category.js"
	import { getProductListAPI } from "@/api/product.js"
	export default {
		data() {
			return {
				active: 0,
				categoryList: [], //商品分类列表
				productList: [], //商品列表
				categoryId: null,
				loading: false,
				finished: false,
				refreshing: false,
				pageSize: 10,
				pageIndex: 1,
				pageTotal: 0,
			}
		},
		created() {
			//获取商品分类(所有)
			getCategoryListAPI().then(result => {
				this.categoryList = result.data
				if (this.categoryList.length > 0) {
					this.categoryId = this.categoryList[0].id
				}
			})
		},
		methods: {
			onChange(index) {
				console.log("onChange", index)
				let category = this.categoryList[index]
				this.categoryId = category.id
				this.onRefresh()
			},

			onLoad() {
				console.log("开始加载", this.pageIndex)
				// 如果刷新 则初始数据 列表清空 页号设置初始 总页数清空
				if (this.refreshing) {
					this.refreshing = false;
				}

				// 准备接口参数
				let params = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					categoryId: this.categoryId,
				}
				// 调用接口获取商品数据
				getProductListAPI(params).then(result => {
					// 设置总页数
					this.pageTotal = result.total;

					//如果有商品数据，则累加列表
					if (result.rows.length > 0) {
						this.productList = this.productList.concat(result.rows)
					}

					//本次加载完成
					this.loading = false;

					// 需要继续加载吗，如果不需要则
					if (this.pageIndex >= this.pageTotal) {
						this.finished = true;
					} else {
						// 页号递增
						this.pageIndex = this.pageIndex + 1
					}
				})
			},

			onRefresh() {
				this.pageIndex = 1; //初始
				this.productList = []; // 清空列表数据
				this.pageTotal = 0; //总页数

				this.finished = false;
				// 可以刷新
				this.refreshing = true;

				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.onLoad();
				// 需要继续加载吗，如果不需要则
				if (this.pageIndex >= this.pageTotal) {
					this.finished = true;
				} else {
					// 页号递增
					this.pageIndex = this.pageIndex + 1
				}
			},
		}
	}
</script>
<style lang="less" scoped>
	.left {
		background-color: white;

		.van-sidebar {
			width: 100%;

			.van-sidebar-item {
				padding: 10px;
			}

			.van-sidebar-item--select:before {
				width: 0;
			}
		}
	}

	.right {
		background-color: white;

		.van-card {
			font-size: 14px;

			// 样式穿透
			/deep/.van-card__content {
				justify-content: center;
			}

			/deep/.van-card__price {
				color: red;
				font-weight: 800;
			}
		}
	}
</style>